<template>
	<div class="select" :style="styles">
		<!-- 下拉列表主内容 -->
		<div class="btn" @click="flag=!flag">{{select||list[0][config.field]}}</div>
		<span class="icon-box" :class="{rotate: flag}"><Icon type="arrowDown"/></span>
		<!-- 下拉列表options -->
		<div class="list scroll" v-show="flag">
			<div 
				class="item hovering" 
				:class="[{active: select==item[config.field]}, {mores: item.country_id==config.num}]" 
				v-for="item in list" 
				:key="item.id" 
				@click="handleSelect(item)"
				>
				{{item[config.field]}}
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'Select',
	data(){
		return{
			// 当前选中项的内容
			select: '中国大陆',
			// 控制显示隐藏options，图标旋转
			flag: false
		}
	},
	props:{
		// 配置select选项
		config: {
			type: Object,
			default: () => ({
				// select的名字
				name: '',
				// 用来介绍的选项,不能选中
				num: 9999,
				// 下拉options的数据字段名
				field: 'name'
			})
		},
		// option选项
		list:{
			type: Array,
			required: true
		},
		// select接收的样式
		styles: {
			type: Object,
			default: () => ({})
		}
	},
	methods:{
		// 选项变化更新通知父组件
		handleSelect(item){
			if(item.id==this.config.num) return;
			this.select = item[this.config.field];
			this.flag = false;
			this.$emit('change', this.config.name, item);
		}
	}
}
</script>

<style scoped lang="less">
.select{
	position: relative;
	display: flex;
	align-items: center;
	width: 130px;
	height: 40px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border: 1px solid #dcdfe6;
	border-right: 0;
	box-sizing: border-box;
	transition: border-color .2s cubic-bezier(.645,.045,.355,1);
	color: #909399;
	cursor: pointer;
	user-select: none;
	.btn{
		padding-left: 16px;
		padding-right: 35px;
		width: 100%;
		line-height: 40px;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.icon-box{
		position: absolute;
		right: 7px;
		top: 0;
		line-height: 38px;
		font-size: 18px;
		transition: transform .5s;
		z-index: -1;
		&.rotate{
			transform: rotate(-180deg);
		}
	}
	.list{
		position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
		height: 237px;
		padding: 6px 0;
		margin: 12px 0 5px 0;
		box-sizing: border-box;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		z-index: 20;
		&::-webkit-scrollbar { width: 5px; }
		.item{
			position: relative;
			padding: 0 16px 0 20px;
			height: 34px;
			line-height: 34px;
			color: #606266;
			box-sizing: border-box;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
			font-size: 14px;
			&.mores{
				color: #c0c4cc;
				background-color: #fff!important;
				cursor: not-allowed;
			}
			&.active{
				color: #00a1d6;
				font-weight: 700;
			}
		}
	}
}
</style>
